<template>
    <div class="homeMain">
        <div class="ta-r">
            <Icon type="md-settings" size="30" @click="openHomePageLayout" />
        </div>
        <div>
            <div v-for="(comp, componentGroupIndex) in currentComponentGroup" :key="componentGroupIndex" class="mt-10">
                <Card v-if="comp.code === 'myDesktop'">
                    <div class="title sty1">
                        <i></i>
                        我的桌面
                    </div>
                    <div class="menu-out desktop" style="border-bottom: 1px solid #588cfb;">
                        <div class="menu">
                            <div class="myResourceBtn">
                                <div v-for="(item, index) in myResourceList" :key="index"
                                    v-if="myResourceList && myResourceList.length > 0">
                                    <div class="myResourceDiv" @click="handleChange(item.resource)">
                                        <div :class="['imgBox', item.resource.icon ? item.resource.icon : 'todo']"></div>
                                    </div>
                                    <p>{{item.resource.name}} </p>
                                </div>
                                <div v-else>暂无，请点击查询更多维护</div>

                                <div class="rightBtn">
                                    <Button type="primary" @click="goToMyDesktop">
                                        查看更多 >
                                    </Button>
                                </div>
                            </div>
                        </div>
                        <div class="botBtn" v-if="isShowMyUseHistoryList"
                            @click="isShowMyUseHistoryList = !isShowMyUseHistoryList">隐藏最近使用
                        </div>
                        <div class="botBtn" v-else @click="isShowMyUseHistoryList = !isShowMyUseHistoryList">显示最近使用</div>
                    </div>
                    <div v-show="isShowMyUseHistoryList">
                        <div v-show="myUseHistoryList && myUseHistoryList.length > 0">
                            <div class="title sty1 menu-box">
                                <i class="II"></i>
                                最近使用
                            </div>
                            <div class="menu-out desktop">
                                <div class="menu">
                                    <div v-for="(item, index) in myUseHistoryList" :key="index" class="">
                                        <div class="HistoryItem" align="middle" @click="handleChange(item.resource)">
                                            <div :class="['itemImg', item.resource.icon ? item.resource.icon : 'todo']"></div>
                                            <span>{{item.resource.name}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>

                <Card v-if="comp.code === '客户管理'" style="margin-top: 10px;">
                    <div class="title sty2 sty1">
                        {{comp.name}}
                        <Icon type="md-create" size="30" @click="openCurrentLayout(comp.resourceId)" />
                    </div>
                    <div class="components-box">
                        <!-- 组件摆放 -->
                        <div v-for="(itemChildren, itemIndex) in comp.children" :key="itemIndex">
                            <div v-if="itemChildren.code === '客户列表'">
                                <home-customer @addCustomer="addCustomer"></home-customer>
                            </div>
                            <div v-if="itemChildren.code === '联系人'">
                                <home-contract></home-contract>
                            </div>
                        </div>
                    </div>
                </Card>

                <Card v-if="comp.code === '我的工作'">
                    <div class="title sty2 sty1">
                        {{comp.name}}
                        <Icon type="md-create" size="30" @click="openCurrentLayout(comp.resourceId)" />
                    </div>
                    <div class="components-box">
                        <!-- 组件摆放 -->
                        <div v-for="(itemChildren, itemIndex) in comp.children" :key="itemIndex">
                            <div v-if="itemChildren.code === '待办事项'">
                                <backlog-module></backlog-module>
                            </div>
                        </div>
                    </div>
                </Card>

                <Card v-if="comp.code === '我的图表'" style="margin-top: 10px;">
                    <div class="title sty2 sty1">
                        {{comp.name}}
                        <Icon type="md-create" size="30" @click="openCurrentLayout(comp.resourceId)" />
                    </div>
                    <div class="components-box">
                        <!-- 组件摆放 -->
                        <div v-for="(itemChildren, itemIndex) in comp.children" :key="itemIndex">
                            <div v-if="itemChildren.code === '销售图表'">
                                <sale-funnel ref="mySaleFunnel"></sale-funnel>
                            </div>
                        </div>
                    </div>
                </Card>


                <Card v-if="comp.code === '协调办公'" style="margin-top: 10px;">
                    <div class="title sty2 sty1">
                        <!-- <router-link to="/workflow/workbench"> -->
                            {{comp.name}}
                        <!-- </router-link> -->
                        <Icon type="md-create" size="30" @click="openCurrentLayout(comp.resourceId)" />
                    </div>
                    <div class="components-box">
                        <!-- 组件摆放 -->
                        <div v-for="(itemChildren, itemIndex) in comp.children" :key="itemIndex">
                            <div v-if="itemChildren.code === '流程管理'">
                                <mission-module class="mt-20"></mission-module>
                            </div>
                        </div>
                    </div>
                </Card>

                <Card v-if="comp.code === 'shop'" style="margin-top: 10px;">
                    <div class="title sty2 sty1">
                        我的店铺
                    </div>
                    <div class="components-box">
                        <!-- 组件摆放 -->
                        <shop-module class="mt-20"></shop-module>
                    </div>
                </Card>
            </div>
        </div>

        <Modal :draggable="true" v-model="procedureModal" @on-cancel="closepProcedureModal" fullscreen :mask-closable="false"
               title="设置向导">
            <div style="height:100%;">
                <department-maintenance v-show="DMShow"></department-maintenance>
                <job-list v-show="JBShow"></job-list>
            </div>

            <div slot="footer">
                <Button @click="beforeStep">上一步</Button>
                <Button @click="nextStep">下一步</Button>
            </div>
        </Modal>

        <Modal
            @on-ok="subHomePageLayout"
            @on-cancel="cancelHomePageLayout"
            v-model="homePageLayout"
            :mask-closable="false"
            :draggable="true"
            title="首页布局">
            <div style="color:#2d8cf0;padding-right:65px;" class="ta-r">温馨提示:已选模块通过拖动排序</div>
            <transfer-drag
                :data="componentGroup"
                :target-keys="targetKeys1"
                :render-format="render1"
                @on-change="handleChange1"></transfer-drag>
        </Modal>

        <Modal :draggable="true"
            @on-ok="subCurrentLayout"
            @on-cancel="cancelCurrentLayout"
            v-model="currentLayout"
            :mask-closable="false"
            :title="homePageLayoutTitle">
            <div style="color:#2d8cf0;padding-right:65px;" class="ta-r">温馨提示:已选模块通过拖动排序</div>
            <transfer-drag
                :data="currentLayoutComponentGroup"
                :target-keys="currentLayoutTargetKeys"
                :render-format="currentRender"
                @on-change="currentHhandleChange"></transfer-drag>
        </Modal>


    </div>
</template>

<script>
    // import sidebarMenu from '../main-components/shrinkable-menu/components/sidebarMenu.vue';
    import departmentMaintenance from '@/pages/components/departmentMaintenance/departmentMaintenance';
    import jobList from '@/pages/components/jobList/jobList';
    import backlogModule from '@/pages/components/backlogModule/backlogModule';
    import missionModule from '@/pages/components/missionModule/missionModule';
    import saleFunnel from '@/pages/components/saleFunnel/saleFunnel';
    import shopModule from '@/pages/components/shopModule/shopModule';
    import TransferDrag from '../components/transfer-drag';
    import homeCustomer from '@/customer/pages/components/homeCustomer';
    import homeContract from '@/customer/pages/components/homeContract';

    export default {
        inject: ['reload'],
        data () {
            return {
                horizontal: 'horizontal',
                menuTheme: 'light',
                procedureModal: false,
                showIndex: -1,
                DMShow: true,
                JBShow: false,
                // 我的最近使用列表
                myUseHistoryList: [],
                // 我的桌面列表
                myResourceList: [],
                isShowMyUseHistoryList: true,
                componentGroup: [],
                currentComponentGroup: [],
                targetKeys1: [],
                homePageLayoutTitle: '',
                homePageLayout: false,
                postObj: {
                    parentId: null,
                    resourceId: []
                },
                currentLayout: false,
                currentLayoutComponentGroup: [],
                currentLayoutTargetKeys: []
            };
        },
        components: {
            TransferDrag,
            // sidebarMenu,
            departmentMaintenance,
            jobList,
            backlogModule,
            missionModule,
            saleFunnel,
            shopModule,
            homeCustomer,
            homeContract
        },
        computed: {},
        mounted () {
            // 获取数据字典信息
            depot.get({
                url: this.URL.DATA.FIND_ALL,
                cb: data => {
                    if (data.code === 0) {
                        localStorage.setItem('dictionary', JSON.stringify(data.data));
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });

            this.changeIndex(0);
            // 获取我的最近使用记录
            this.findMyUseHistoryList();
            // 获取我的桌面
            this.findMyResourceList();
            // 获取当前布局
            this.findUserModuleList();
            // 获取所有布局
            this.findUserModule();
        },
        methods: {
            addCustomer () {
                // 新增客户后刷新漏斗组件的查询方法
                let mySaleFunnel = this.$refs.mySaleFunnel[0];
                if (mySaleFunnel) {
                    mySaleFunnel.getFindAllChildrenUserListByUserIdForSalesReport();
                }
            },
            changeIndex (index) {
                this.showIndex = index;
                if (index === 0) {
                    this.DMShow = true;
                    this.JBShow = false;
                } else if (index === 1) {
                    this.DMShow = false;
                    this.JBShow = true;
                }
            },
            beforeStep () {
                if (this.showIndex === 1) {
                    this.changeIndex(this.showIndex - 1);
                }
            },
            nextStep () {
                if (this.showIndex === 0) {
                    this.changeIndex(this.showIndex + 1);
                }
            },
            closepProcedureModal () {
                this.procedureModal = false;
                this.DMShow = false;
                this.JBShow = false;
            },
            handleChange (resource) {
                if (!resource) {
                    return;
                }
                // console.log(resource.link, 11);
                //   let willpush = true;
                //   if (this.beforePush !== undefined) {
                //     if (!this.beforePush(name)) {
                //       willpush = false;
                //     }
                //   }
                //   if (willpush) {
                this.saveMyUseHistory(resource.id);
                this.$router.push({
                    path: resource.link
                });
                //   }
            },
            // 保存操作记录
            saveMyUseHistory (resourceId) {
                if (!resourceId) {
                    return;
                }
                depot.post({
                    url: this.URL.USER.SAVE_MY_USE_HISTORY,
                    data: resourceId,
                    cb: (data) => {
                    }
                });
            },
            // 获取最近使用记录
            findMyUseHistoryList () {
                depot.get({
                    url: this.URL.USER.FIND_MY_USE_HISTORY_LIST,
                    cb: data => {
                        if (data.code === 0) {
                            this.myUseHistoryList = data.data;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('获取最近使用记录失败');
                    }
                });
            },
            // 获取我的桌面
            findMyResourceList () {
                depot.get({
                    url: this.URL.USER.FIND_MY_RESOURCE_LIST,
                    cb: data => {
                        if (data.code === 0) {
                            this.myResourceList = data.data;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('获取我的桌面失败');
                    }
                });
            },
            // 跳转到我的桌面按钮
            goToMyDesktop () {
                this.$router.push({
                    path: '/home/myDesktop'
                });
            },
            // 获取当前布局
            findUserModuleList () {
                depot.get({
                    url: this.URL.USER.FIND_USER_MODULE_LIST,
                    config: {
                        params: {
                            type: 'MODULE_HOME'
                        }
                    },
                    cb: data => {
                        if (data.code === 0) {
                            let arr = [];
                            let arr2 = [];
                            data.data.forEach((item, index) => {
                                let obj = {
                                    id: null,
                                    key: null,
                                    code: '',
                                    name: '',
                                    label: '',
                                    children: [],
                                    resourceId: null
                                };
                                obj.key = item.resource.id.toString();
                                obj.id = item.resource.id;
                                obj.code = item.resource.code;
                                obj.name = item.resource.name;
                                obj.label = item.resource.name;
                                obj.children = [];
                                obj.resourceId = item.resourceId;
                                obj.waitParentId = item.id;
                                item.children.forEach((item2, index2) => {
                                    let obj2 = {
                                        id: null,
                                        key: null,
                                        code: '',
                                        name: '',
                                        label: ''
                                    };
                                    obj2.key = item2.resource.id.toString();
                                    obj2.id = item2.resource.id;
                                    obj2.code = item2.resource.code;
                                    obj2.name = item2.resource.name;
                                    obj2.label = item2.resource.name;
                                    obj.children.push(obj2);
                                });
                                arr.push(obj);
                                arr2.push(obj.key);
                            });
                            this.currentComponentGroup = JSON.parse(JSON.stringify(arr));
                            this.targetKeys1 = JSON.parse(JSON.stringify(arr2));
                            // console.log(this.currentComponentGroup, 11);
                            // console.log(this.targetKeys1, 33);
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            // 获取所有布局
            findUserModule () {
                depot.get({
                    url: this.URL.USER.FIND_USER_MODULE,
                    config: {
                        params: {
                            type: 'MODULE_HOME'
                        }
                    },
                    cb: data => {
                        if (data.code === 0) {
                            let arr = [];
                            data.data.forEach((item, index) => {
                                let obj = {
                                    id: null,
                                    key: null,
                                    code: '',
                                    name: '',
                                    label: ''
                                };
                                obj.key = item.id.toString();
                                obj.id = item.id;
                                obj.code = item.code;
                                obj.name = item.name;
                                obj.label = item.name;
                                obj.children = [];
                                item.children.forEach((item2, index2) => {
                                    let obj2 = {
                                        id: null,
                                        key: null,
                                        code: '',
                                        name: '',
                                        label: ''
                                    };
                                    obj2.key = item2.id.toString();
                                    obj2.id = item2.id;
                                    obj2.code = item2.code;
                                    obj2.name = item2.name;
                                    obj2.label = item2.name;
                                    obj.children.push(obj2);
                                });
                                arr.push(obj);
                            });
                            this.componentGroup = JSON.parse(JSON.stringify(arr));
                            // console.log(this.componentGroup, 22);
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找用户菜单失败');
                    }
                });
            },
            // 打开首页布局
            openHomePageLayout () {
                this.postObj.parentId = null;
                this.homePageLayout = true;
                this.homePageLayoutTitle = '首页布局';
            },
            // 提交穿梭框方法
            subHomePageLayout () {
                let datas = {};
                this.postObj.resourceId = this.targetKeys1;
                datas = this.postObj;
                depot.post({
                    url: this.URL.USER.SAVE_USER_MODULE,
                    data: datas,
                    cb: data => {
                        if (data.code === 0) {
                            this.homePageLayout = false;
                            this.findUserModuleList();
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            // 取消首页布局
            cancelHomePageLayout () {
                this.homePageLayout = false;
            },
            render1 (item) {
                return item.label;
            },
            handleChange1 (newTargetKeys, direction, moveKeys) {
                // console.log(newTargetKeys, 1);
                // console.log(direction, 2);
                // console.log(moveKeys, 3);
                this.targetKeys1 = newTargetKeys;
            },

            // 打开当前布局
            openCurrentLayout (resourceId) {
                this.currentLayoutComponentGroup = [];
                let arr = [];
                this.currentLayout = true;
                this.componentGroup.forEach((item, index) => {
                    if (resourceId === item.id) {
                        this.homePageLayoutTitle = item.name + '布局';

                        item.children.forEach((item2, index2) => {
                            let obj = {
                                id: null,
                                key: null,
                                code: '',
                                name: '',
                                label: ''
                            };
                            obj.key = item2.id.toString();
                            obj.id = item2.id;
                            obj.code = item2.code;
                            obj.name = item2.name;
                            obj.label = item2.name;
                            arr.push(obj);
                        });
                    }
                });
                this.currentLayoutComponentGroup = JSON.parse(JSON.stringify(arr));
                // console.log(this.currentLayoutComponentGroup, 88);

                this.currentLayoutTargetKeys = [];
                let arr2 = [];
                this.currentComponentGroup.forEach((item, index) => {
                    if (resourceId === item.id) {
                        this.postObj.parentId = item.waitParentId;
                        item.children.forEach((item2, index2) => {
                            let obj2 = {
                                id: null,
                                key: null,
                                code: '',
                                name: '',
                                label: ''
                            };
                            obj2.key = item2.id.toString();
                            obj2.id = item2.id;
                            obj2.code = item2.code;
                            obj2.name = item2.name;
                            obj2.label = item2.name;
                            arr2.push(obj2.key);
                        });
                    }
                });
                this.currentLayoutTargetKeys = JSON.parse(JSON.stringify(arr2));
                // console.log(this.currentLayoutTargetKeys, 99);
            },
            subCurrentLayout () {
                let datas = {};
                this.postObj.resourceId = this.currentLayoutTargetKeys;
                datas = this.postObj;
                depot.post({
                    url: this.URL.USER.SAVE_USER_MODULE,
                    data: datas,
                    cb: data => {
                        if (data.code === 0) {
                            this.homePageLayout = false;
                            this.findUserModuleList();
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            cancelCurrentLayout () {
                this.currentLayout = false;
            },
            currentRender (item) {
                return item.label;
            },
            currentHhandleChange (newTargetKeys, direction, moveKeys) {
                // console.log(newTargetKeys, 1);
                // console.log(direction, 2);
                // console.log(moveKeys, 3);
                this.currentLayoutTargetKeys = newTargetKeys;
            }
        },
        beforeRouteEnter (to, from, next) {
            // console.log(to, from, 111);
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建
            next(vm => {
                // 通过 `vm` 访问组件实例
                if (from.name === 'customerDetails') {
                    vm.reload();
                }
            });
        }
    };
</script>


<style lang="less">
    .main .single-page-con {
        background: #fff;
    }

    .homeMain {
        // min-width: 1000px;

        .sty1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            color: #4d4d4d;

            // i {
            //     width: 4px;
            //     height: 20px;
            //     background-color: #588cfb;
            //     margin-right: 6px;
            // }
        }

        .sty2 {
            height: 20px;
            display: flex;
            position: relative;
            padding-left: 10px;

            &:before {
                position: absolute;
                content: "";
                width: 4px;
                height: 20px;
                background-color: #588cfb;
                left: 0;
                top: 0;
            }
        }

        //   最近使用 新增
        .menu-box {
            padding-top: 21px;
        }

        .desktop {
            position: relative;
            .botBtn {
                position: absolute;
                width: 200px;
                height: 50px;
                border-style: solid;
                border-color: #588cfb #588cfb transparent #588cfb;
                border-width: 1px 1px 0 1px;
                right: 0;
                bottom: 0;
                text-align: center;
                line-height: 49px;
                color: #588cfb;
                font-size: 16px;
                border-radius: 10px 10px 0 0;
                cursor: pointer;
            }
        }
    }

    .desktop {
        display: flex;
        padding: 22px 0;

        .menu {
            // width: 80%;
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;

            div {
                margin-right: 10px;
                // margin-top: 10px;
            }

            .imgBox {
                width: 65px;
                height: 65px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100%;
                margin-right: 0;
            }

            .myResourceBtn {
                display: flex;
                display: -webkit-flex;
                text-align: center;

                .myResourceDiv {
                    background: url(../../images/icon/myBg.png) no-repeat center;
                    width: 125px;
                    height: 125px;
                    text-align: center;
                    display: flex;
                    display: -webkit-flex;
                    flex-direction: column;
                    -ms-flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;

                    img {
                        width: 65px;
                        height: 65px;
                    }
                }

                p {
                    margin-top: 11px;
                }
            }

            .HistoryItem {
                // width: 120px;
                height: 50px;
                line-height: 50px;
                background-color: #ffffff;
                border: 1px solid #d9e5fe;
                box-shadow: 0px 0px 5px #d9e5fe;
                border-radius: 4px;
                padding: 0 10px;
                cursor: pointer;

                .itemImg {
                    width: 26px;
                    height: 26px;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    display: inline-block;
                    vertical-align: middle;
                }

                span {
                    font-size: 14px;
                    color: #588cfb;
                }
            }
        }

        .rightBtn button {
            width: 125px;
            height: 125px;
            border-radius: 10px;
            // margin-top: 10px;
        }
    }

    // 更改下边框颜色
    .main .single-page-con {
        background-color: #f0f0f0;
    }

    .ivu-card-bordered {
        border: none;
        border-radius: 0;
    }

    .todo {
        background-image: url(../../images/icon/todo.png);
    }

    .bumen {
        background-image: url(../../images/icon/bumen.png);
    }

    .customerGradeList {
        background-image: url(../../images/icon/customerGradeList.png);
    }

    .customerList {
        background-image: url(../../images/icon/customerList.png);
    }

    .intiate {
        background-image: url(../../images/icon/intiate.png);
    }

    .jobs {
        background-image: url(../../images/icon/jobs.png);
    }

    .posit {
        background-image: url(../../images/icon/posit.png);
    }

    .processManagement {
        background-image: url(../../images/icon/processManagement.png);
    }

    .performanceManagement {
        background-image: url(../../images/icon/performanceManagement.png);
    }

    .staff {
        background-image: url(../../images/icon/staff.png);
    }

    .workbench {
        background-image: url(../../images/icon/workbench.png);
    }

</style>
